<template>
  <div>
    <div class="top">
      <router-link to="/Choice"><van-icon name="arrow-left" /></router-link>
      <h3>购物袋</h3>
      <p @click="deleteGoods">删除</p>
    </div>
    <!-- <img :src="obj.goodsImg" alt="">
              <p>{{ obj.goodsId }}</p>
        <h3>{{ obj.goodsName }}</h3>
        <p>{{ obj.goodsitemNO }}</p>
        <span>￥{{ obj.goodsPrice }}</span> -->
    <ul id="content">
      <li v-for="(re, index) in arr" :key="re.id">
        <div class="left">
          <van-checkbox
            v-model="re.isChecked"
            checked-color="#000"
            @click="backCheck"
          ></van-checkbox>
          <img :src="re.goodsImg" alt="" />
        </div>
        <div class="right">
          <div>
            <p class="tSize">{{ re.goodsName }}</p>
            <p class="bSize">{{ re.goodsColor }}</p>
          </div>
          <div class="rDown">
            <div class="pirce">￥{{ re.goodsPrice }}</div>
            <div class="rdson">
              <p><van-icon name="minus" @click="reduce(index)" /></p>
              <span>{{ re.goodsCount }}</span>
              <p><van-icon name="plus" @click="add(index)" /></p>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div id="cartBottom">
      <van-checkbox
        v-model="checkAll"
        checked-color="#000"
        id="checkall"
        @click="checkAlls"
        >全选</van-checkbox
      >
      <div id="price">
        <p id="total">
          合计：<span>￥{{ totalMoney() }}</span>
        </p>
        <p id="settlement">去结算</p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
import { Checkbox, CheckboxGroup } from "vant";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import axios from "axios";
export default {
  name: "cart",
  data() {
    return {
      obj: this.$route,
      arr: [],
      checkAll: false,
      price: "",
    };
  },
  methods: {
    checkAlls() {
      this.arr.forEach((goods) => {
        goods.isChecked = this.checkAll;
        // console.log("goods.isChecked ", goods.isChecked);
      });
    },
    backCheck() {
      this.checkAll = this.arr.every((goods) => goods.isChecked);
    },
    totalMoney() {
      let money = 0;
      this.arr.forEach(
        (goods) =>
          (money += goods.isChecked ? goods.goodsPrice * goods.goodsCount : 0)
      );
      return money;
    },
    deleteGoods() {
      for (let i = 0; i < this.arr.length; i++) {
        var flag = i;
      }
      axios({
        url: "/carts/" + this.arr[flag].id,
        method: "DELETE",
        data: {
          goodsCount: this.arr[flag].goodsCount,
        },
      }).then((res) => {
        if (this.arr[flag].isChecked == true) {
          this.arr.splice(flag, 1);
        }
        console.log(res.data)
      });
    },
    reduce(idx) {
      if (this.arr[idx].goodsCount <= 1) {
        this.arr[idx].goodsCount = 1;
        return;
      }
      axios({
        url: "/carts/" + this.arr[idx].id,
        method: "PATCH",
        data: {
          goodsCount: this.arr[idx].goodsCount - 1,
        },
      }).then((res) => {
        this.arr[idx].goodsCount--;
        console.log(res.data)
      });
    },
    add(idx) {
      axios({
        url: "/carts/" + this.arr[idx].id,
        method: "PATCH",
        data: {
          goodsCount: this.arr[idx].goodsCount + 1,
        },
      }).then((res) => {
        this.arr[idx].goodsCount++;
        console.log(res.data)
      });
    },
  },
  created() {
    axios({
      url: "/carts",
      method: "get",
    }).then((res) => {
      // console.log("接收",res.data);
      // console.log("发送",id);
      res.data.forEach((item) => {
        item.isChecked = false;
      });
      console.log("resss", res.data);
      this.arr = res.data;
    });
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 999;
}
#content {
  padding-top: 0.44rem;
  padding-bottom: 0.55rem;
}
#content > li {
  width: 100%;
  height: 1.25rem;
  display: flex;
  justify-content: space-between;
  margin: 0.1rem 0rem;
}
#content > li > .left {
  width: 40%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
}
#content > li > .left > img {
  width: 1rem;
  height: 1rem;
}
#content > li > .right {
  width: 60%;
  display: flex;
  flex-direction: column;
}
#content > li > .right > .rDown {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 0.32rem;
}
.rdson > p {
  width: 0.2rem;
  height: 0.2rem;
  border: 0.005rem solid #000;
  line-height: 0.2rem;
  text-align: center;
}
.tSize {
  font-size: 0.125rem;
  margin-top: 0.16rem;
}
.bSize {
  font-size: 0.125rem;
  margin-top: 0.075rem;
  width: 0.75rem;
  background-color: #f6f6f6;
  height: 0.2rem;
  line-height: 0.2rem;
  text-align: center;
}
.rdson {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 0.8rem;
  margin-right: 0.15rem;
}
.pirce {
  color: #e22f32;
}
#cartBottom {
  width: 100%;
  height: 0.55rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
#cartBottom > #price {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#price > #settlement {
  width: 1rem;
  height: 0.35rem;
  background-color: #f9bc21;
  line-height: 0.35rem;
  text-align: center;
  font-size: 0.13rem;
}
#price > #total {
  font-size: 0.13rem;
  margin-right: 0.1rem;
}
#price > #total > span {
  color: red;
  font-size: 0.175rem;
}
#checkall {
  font-size: 0.13rem;
}
</style>